<template>
  <div :class="isMobile ? 'isMobile' : 'isPc'">
    <router-view v-slot="{ Component }">
      <component :is="Component" v-if="isRouterAlive" />
    </router-view>
  </div>
</template>

<script setup>
import { getCurrentInstance, onMounted } from 'vue';

import { provide, inject, ref } from 'vue';
import useSettingsStore from '@/store/modules/settings';
import { handleThemeStyle } from '@/utils/theme';
import { isMobile } from '@/utils/request.js';
import BGGJ from '@/assets/icons/svg/bggj.svg';
const isRouterAlive = ref(true);
const bgColor = ref({});
const color = 'red';
let reload = () => {
  isRouterAlive.value = false;
  nextTick(() => {
    isRouterAlive.value = true;
  });
};
window.reload = reload
provide('reload', reload);
onMounted(() => {
  window.localStorage.setItem('scanUrl', window.location.href.split('#')[0]);
  nextTick(() => {
    // 初始化主题样式
    handleThemeStyle(useSettingsStore().theme);
  });
});

</script>
<style lang="scss">
body {
  cursor: url('./assets/images/下载.png'), auto !important;
}

.isMobile {
  min-height: 100%;
  background-color: #f2f3f5;
}
.el-submenu__title {
  height: 36px !important;
  line-height: 36px !important;
}

.el-menu-item {
  height: 100%;
  line-height: 100%;
}

.el-sub-menu__title {
  height: 48px !important;
  line-height: 48px !important;
  font-size: 18px !important;
}

#app {
  .sidebar-container {
    .submenu-title-noDropdown {
      height: 48px !important;
      line-height: 48px !important;
      font-size: 18px !important;
      // width: 180px;
      // margin: 4px;

      border-radius: 12px;
    }

    .theme-dark {
      .el-menu {
        .nest-menu {
          width: 140px !important;
          margin: 4px auto;
          border-radius: 17px;
          // background-color: #f4f8ff;
          overflow: hidden;

          .el-menu-item {
            .svg-icon {
              display: none;
            }
          }
        }
        .el-sub-menu {
          .el-sub-menu__icon-arrow {
            display: none;
          }
          &.is-opened > .el-sub-menu__title .myarrow {
            transform: rotateZ(180deg);
          }
          &.is-active {
            .el-sub-menu__title {
              color: var(--el-color-primary) !important;
            }
          }

          .el-sub-menu__title {
            .myarrow {
              position: absolute;
              top: 50%;
              right: 20px;
              margin-top: -7px;
              transition: transform var(--el-transition-duration);
              font-size: 12px;
              margin-right: 0;
              width: 12px;
              display: inline-block;
              .myarrowSvg {
                font-size: 12px;
              }
            }
            &:hover {
              color: var(--el-color-primary) !important;
            }
          }

          .el-menu {
            .el-menu-item {
              width: 180px !important;

              &.is-active {
                background-color: #2d3b49 !important;
              }

              &:hover {
                color: var(--el-color-primary) !important;
              }
            }
          }
        }
      }

      .submenu-title-noDropdown {
      }
    }

    .theme-light {
      .el-menu {
        font-weight: bold;

        &.el-menu--collapse {
          .svg-icon {
            font-size: 18px;
          }
        }

        .nest-menu {
          width: 140px !important;
          margin: 4px auto;
          border-radius: 17px;
          background-color: #f4f8ff;
          overflow: hidden;

          .el-menu-item {
            .svg-icon {
              display: none;
            }
          }
        }

        .el-sub-menu {
          // width: 180px;
          .el-sub-menu__icon-arrow {
            display: none;
          }
          &.is-opened > .el-sub-menu__title .myarrow {
            transform: rotateZ(180deg);
          }
          margin: 10px auto;

          .el-sub-menu__title {
            background-color: #f4f8ff !important;
            border-radius: 12px;
            .myarrow {
              position: absolute;
              top: 50%;
              right: 20px;
              margin-top: -7px;
              transition: transform var(--el-transition-duration);
              font-size: 12px;
              margin-right: 0;
              width: 12px;
              display: inline-block;
              .myarrowSvg {
                font-size: 12px;
              }
            }
            .svg-icon {
              font-size: 30px;
            }

            // .svg-icon {
            //   &:nth-child(2) {
            //     font-size: 30px;
            //   }
            // }
          }

          &.is-active {
            .el-sub-menu__title {
              .myarrow {
                color: white !important;
              }
              // color: var(--el-color-primary) !important;
              background-image: linear-gradient(
                to right,
                #6a4cf7,
                var(--el-color-primary)
              );
              color: white !important;
              border-radius: 12px;
            }
          }

          .el-sub-menu__title {
            &:hover {
              // color: var(--el-color-primary) !important;
              background-image: linear-gradient(
                to right,
                #6a4cf7,
                var(--el-color-primary)
              );
              color: white !important;
              border-radius: 12px;
            }
          }

          .el-menu {
            .el-menu-item {
              // padding-left: 20px !important;
              height: 30px !important;

              &.is-active {
                // background-color: #2d3b49 !important;
                background-image: linear-gradient(
                  to right,
                  #6a4cf7,
                  var(--el-color-primary)
                );
                color: white;
              }

              &:hover {
                // color: var(--el-color-primary)!important;
                background-image: linear-gradient(
                  to right,
                  #6a4cf7,
                  var(--el-color-primary)
                );
                color: white;
              }
            }
          }
        }
      }

      .submenu-title-noDropdown {
        background-color: #f4f8ff !important;

        .svg-icon {
          font-size: 30px;
        }

        &.is-active {
          background-image: linear-gradient(
            to right,
            #6a4cf7,
            var(--el-color-primary)
          );
          color: white !important;
          border-radius: 12px;
        }

        &:hover {
          background-image: linear-gradient(
            to right,
            #6a4cf7,
            var(--el-color-primary)
          );
          color: white !important;
          border-radius: 12px;

          span {
            color: white !important;
          }

          svg {
            color: white !important;
          }
        }
      }
    }

    // .theme-light {
    //   .scrollbar-wrapper {
    //     .submenu-title-noDropdown {
    //       &:hover {
    //         color: black !important;
    //       }
    //     }
    //     .el-submenu__title {
    //       &:hover {
    //         color: black !important;
    //       }
    //     }
    //   }
    // }
  }
}
</style>
